<template>
  <div class="frank_map_right">
    <div class="box_top">
      <el-card :body-style="{ padding: '20px' }" shadow="never">
        <template #header>
          <div class="card-header">
            <span>救治情况</span>
            <el-button type="primary" @click="isShowList = false" v-if="isShowList == true">隐藏列表</el-button>
            <el-button type="primary" @click="isShowList = true" v-if="isShowList == false">显示列表</el-button>
          </div>
        </template>
        <div class="card_body">
          <div class="item_function">
            <img src="~assets/imgHome/rightImg/acceptPatient.png" alt="" />
            <div>
              <div class="send_hospital_value">{{ curNum }}</div>
              <div class="send_hospital_text">接诊伤病员</div>
            </div>
          </div>
          <div class="item_function">
            <img src="~assets/imgHome/rightImg/sendHosp.png" alt="" />
            <div>
              <div class="send_hospital_value">{{ curNum_sendHospital }}</div>
              <div class="send_hospital_text">送往医院伤病员</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <transition name="el-fade-in-linear">
      <div class="box_bottom" v-show="isShowList">
        <el-scrollbar>
          <el-card class="box_card" shadow="never">
            <template #header>
              <div class="card_header">
                <span>状态跟踪</span>
              </div>
            </template>
            <el-table :data="patientRecordStateList" style="width: 100%" max-height="200" height="200">
              <el-table-column prop="Name" label="姓名" width="120" />
              <el-table-column label="状态" width="100" fixed="right">
                <template #default="scope">
                  <span v-if="scope.row.State == '现场处置'" :style="{ color: '#8172d5' }">{{ scope.row.State }}</span>
                  <span v-else-if="scope.row.State == '送院途中'" :style="{ color: '#00bc7a' }">{{ scope.row.State }}</span>
                  <span v-else="scope.row.State == '已入院'" :style="{ color: '#1890ff' }">{{ scope.row.State }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="UpdateTime" label="更新时间"></el-table-column>
            </el-table>
          </el-card>
          <el-card class="box_card" shadow="never">
            <template #header>
              <div class="card_header">
                <span>智能调度</span>
                <div class="btn_smart">
                  <el-button type="primary" @click="handleRegulationMeasure">调度方案</el-button>
                  <el-button type="primary" @click="handleEmergencyPlan">应急预案</el-button>
                  <el-button type="primary" @click="handleClearLine">线路清除</el-button>
                </div>
              </div>
            </template>
            <el-table :data="PatientRecord_XCQXWXZList" style="width: 100%" max-height="200" height="200"
              highlight-current-row current-row-key="id" @row-click="curRowClick">
              <el-table-column prop="Name" label="姓名" width="100" show-overflow-tooltip />
              <el-table-column prop="VenuesName" label="场馆名称" width="120" show-overflow-tooltip />

              <el-table-column prop="AmbName" label="车辆" width="120" show-overflow-tooltip />
              <el-table-column prop="HospitalName" label="医院" width="120" show-overflow-tooltip />
              <el-table-column prop="PatientRecordCode" label="病例号" width="100" show-overflow-tooltip />
              <el-table-column prop="Symptom" label="病情" width="120" show-overflow-tooltip />
              <el-table-column prop="IllnessLevel" label="病情等级" width="100" show-overflow-tooltip />

              <el-table-column prop="VenuesCode" label="场馆编码" width="120" show-overflow-tooltip />
              <el-table-column prop="Telephone" label="联系电话" width="120" show-overflow-tooltip />
              <!-- 车辆医院经纬度 -->
              <el-table-column prop="ambLng" label="车辆经度" width="120" show-overflow-tooltip v-if="false" />
              <el-table-column prop="ambLat" label="车辆纬度" width="120" show-overflow-tooltip v-if="false" />
              <el-table-column prop="hosLng" label="医院经度" width="120" show-overflow-tooltip v-if="false" />
              <el-table-column prop="hosLat" label="医院纬度" width="120" show-overflow-tooltip v-if="false" />
              <el-table-column label="操作" width="60" fixed="right">
                <template #default="scope">
                  <el-button size="small" @click="handleShowLine(scope.$index, scope.row)" round>路线</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="病人列表" name="first">
              <div class="patient_table">
                <el-table :data="patientRecordList" style="width: 100%" max-height="200" height="200">
                  <el-table-column prop="Name" label="姓名" width="100" show-overflow-tooltip />
                  <el-table-column prop="PatientRecordCode" label="病例号" width="100" show-overflow-tooltip />
                  <el-table-column prop="SeeADoctorDate" label="就诊时间" width="180" />
                  <!-- <el-table-column prop="Name" label="姓名" width="100" /> -->
                  <el-table-column prop="IsGroup" label="是否群组事件" width="120" show-overflow-tooltip>
                    <template #default="scope">
                      <div>
                        <span v-if="scope.row.IsGroup == true">{{ "是" }}</span>
                        <span v-else-if="scope.row.IsGroup == false">{{
                          "否"
                        }}</span>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column label="状态" width="100" fixed="right">
                    <template #default="scope">
                      <div>
                        <span v-if="scope.row.State == '现场处置'" :style="{ color: '#8172d5' }">{{ scope.row.State }}</span>
                        <span v-else-if="scope.row.State == '送院途中'" :style="{ color: '#00bc7a' }">{{ scope.row.State
                        }}</span>
                        <span v-else="scope.row.State == '已入院'" :style="{ color: '#1890ff' }">{{ scope.row.State }}</span>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column label="操作" width="60" fixed="right">
                    <template #default="scope">
                      <el-button size="small" @click="handleEdit(scope.$index, scope.row)" round>病历</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-scrollbar>
      </div>
    </transition>
    <!-- 通知信息弹窗  -->
  </div>
</template>

<script>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  watch,
  onUnmounted,
  onBeforeUnmount,
} from "vue";
import VueEvent from "utils/event.js";
// 网络请求
import { GetCureNum, GetCureNum_SendHospital } from "network/getBaseInfoNum";
import {
  GetPatientRecordState,
  GetPatientRecord_XCQXWXZ,
  GetPatientRecordList,
  GetEmergencyPlan,
} from "network/patientRecord";

import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { patientBaseList } from "modelUtils/returnModel";

import { setupMapState } from "../../../store/utils/hook"
export default {
  name: "MapRight",
  components: {},
  props: [],
  setup(props, ctx) {
    const store = useStore();
    const state = reactive({
      drawer: ref(false),
      isShowList: ref(false),
      isShowRegulationMeasure: ref(false),
      isShowEmergencyPlan: ref(false),
      code: ref("001"),
      activeName: ref("first"),
      acceptPatient: ref(0), //接诊伤病员
      sendHospPatient: ref(1), //送往医院伤病员
      curRow: ref(null),
      curRowVenueId: ref(""),
      inteligentSchedulData: ref([]),
      //右侧栏数据
      curNum: ref(0),
      curNum_sendHospital: ref(0),
      // 状态跟踪
      patientRecordStateList: ref([]),
      PatientRecord_XCQXWXZList: ref([]),
      patientRecordList: ref([]),
      timer: ref(null),
    });
    const { ACVCodesVx } = setupMapState("app", ["ACVCodesVx"])
    const handleRegulationMeasure = () => {
      // console.log("调度方案");
      // 先判断是否选择了一行 不选择组织按钮操作
      if (state.curRowVenueId != "") {
        VueEvent.emit("showRegulationMeasure", {
          row: state.curRow,
          isShowRegulationMeasure: true,
        });
      } else {
        ElMessage({ message: "请选择一行任务开始调度！", type: "warning" });
      }
    };
    const handleEmergencyPlan = async () => {
      // if (state.curRowVenueId != "") {
      // 请求应急预案信息
      let emergencyPlanList = await GetEmergencyPlan(
        ACVCodesVx.value,
      );
      // console.log(emergencyPlanList);
      // 将信息传到应急预案弹窗
      VueEvent.emit("showEmergencyPlan", {
        code: state.curRowVenueId,
        isShowEmergencyPlan: true,
        emergencyPlanList: emergencyPlanList,
      });
      // } else {
      //   ElMessage({ message: "请选择一行查看应急预案！", type: "warning" });
      // }
    };
    const handleShowLine = (index, row) => {
      // console.log(row);
      if (
        row.ambLat != null &&
        row.ambLng != null &&
        row.hosLat != null &&
        row.hosLng != null &&
        row.ambLat > 2 &&
        row.ambLng > 2 &&
        row.hosLat > 2 &&
        row.hosLng > 2
      ) {
        ctx.emit("getLinePosition", row);
      } else {
        ElMessage({ message: "暂无去往医院线路", type: "warning" });
      }
    };
    const handleClearLine = () => {
      ctx.emit("clearLine", true);
    };
    const handleEdit = (index, row) => {
      // console.log(index, row);
      VueEvent.emit("showDialogEvent", {
        row: row,
        isShowDialog: true,
      });
    };
    const handleClick = (tab, event) => {
      // console.log(tab, event);
    };
    const curRowClick = (row, column, e) => {
      // console.log(row);
      state.curRowVenueId = row.VenuesCode;
      state.curRow = row;
    };
    /** 监听是否有病人 有则显示列表，没有则不显示列表 */
    watch(
      () => state.curNum,
      (newval, oldval) => {
        // console.log("新的" + newval, "旧的" + oldval);
        if (state.curNum > 0) {
          state.isShowList = true;
        } else {
          state.isShowList = false;
        }
      },
    );
    onBeforeMount(() => { });
    onMounted(async () => {
      // const getData = ()=>{

      // }
      try {
        state.timer = setInterval(async () => {
          if (localStorage.getItem("userInfo") != null) {
            // 请求右侧栏伤病员数量curNumcurNum_sendHospital
            let curNum = await GetCureNum({
              cityCode: ACVCodesVx.value.cityCode,
            });
            state.curNum = curNum.rows;
            let curNum_sendHospital = await GetCureNum_SendHospital({
              cityCode: ACVCodesVx.value.cityCode,
            });
            state.curNum_sendHospital = curNum_sendHospital.rows;

            // 状态跟踪
            let patientRecordStateList = await GetPatientRecordState({
              cityCode: ACVCodesVx.value.cityCode,
            });
            if (patientRecordStateList != null) {
              state.patientRecordStateList = patientRecordStateList;
            }
            // console.log(state.patientRecordStateList);
            // 智能调度
            let patientRecord_XCQXWXZList = await GetPatientRecord_XCQXWXZ({
              cityCode: ACVCodesVx.value.cityCode,
            });
            if (patientRecord_XCQXWXZList != null) {
              // console.log(patientRecord_XCQXWXZList)
              state.PatientRecord_XCQXWXZList = patientBaseList(
                patientRecord_XCQXWXZList,
              );
            }
            // console.log(state.PatientRecord_XCQXWXZList);
            let patientRecordList = await GetPatientRecordList(
              ACVCodesVx.value,
            );
            if (patientRecordList != null) {
              state.patientRecordList = patientRecordList;
            }
            // console.log(state.patientRecordList);
            // ---------------------------------------------------------------------

            let refreshTime = 0;
            refreshTime++;
            // console.log(refreshTime)
          } else {
            clearInterval(state.timer);
          }
        }, 15000);
      } catch (error) {
        throw error;
      }
    });
    onBeforeUnmount(() => {
    });
    onUnmounted(() => {
      clearInterval(state.timer);
    });
    const refState = toRefs(state);
    return {
      ...refState,
      // 事件
      handleRegulationMeasure,
      handleEmergencyPlan,
      handleShowLine,
      handleEdit,
      handleClick,
      curRowClick,
      handleClearLine,
    };
  },
};
</script>
<style scoped>
:deep(.box_top .el-card__header .el-button) {
  margin-right: 10px;
  float: right;
  position: fixed;
  right: 5px;
  border-radius: 5px;
  top: 70px;
  height: 27px;
}

:deep(.box_top .el-card__header .el-button span) {
  font-size: 13px;
}

.box_top .card_body .item_function {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #f2f5f8;
  height: 70px;
  width: 220px;
}

.box_top .card_body .item_function img {
  height: 50px;
  width: 50px;
}

.box_top .card_body {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 70px;
}

.box_top .card_body .send_hospital_value,
.box_top .card_body .send_hospital_text {
  text-align: center;
}

.box_top .card_body .send_hospital_value {
  font-size: 22px;
  font-weight: 700;
}

.frank_map_right .box_card,
.frank_map_right .demo-tabs {
  margin-top: 5px;
}

:deep(.el-card__header) {
  height: 37px;
  line-height: 37px;
  padding: 0;
}

:deep(.el-card__header span) {
  font-size: 17px;
  margin-left: 10px;
  font-weight: 600;
}

.frank_map_right .card_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-card__body) {
  padding: 5px;
}

:deep(.el-table th.el-table__cell) {
  background: #f5f6f7;
}

:deep(.el-tabs__header) {
  background: #fff;
  margin: 0px;
}

.btn_smart .el-button {
  margin-right: 10px;
  width: 100px;
  height: 27px;
}

:deep(.btn_smart .el-button span) {
  font-size: 13px;
}

:deep(.el-tabs--top .el-tabs__item.is-top:last-child) {
  font-size: 16px;
  margin-left: 5px;
  font-weight: 700;
}

.notification {
  position: fixed;
  bottom: 5px;
  right: 5px;
}

@media screen and (max-height:950px) {
  .frank_map_right .box_bottom {
    height: 660px;
  }
}

@media screen and (max-height:876px) {
  .frank_map_right .box_bottom {
    height: 630px;
  }
}

@media screen and (max-height:790px) {
  .frank_map_right .box_bottom {
    height: 430px;
  }
}
</style>